body {
    /* background: #f2f2f2; */
    background: #282c34;
}

.frame {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 400px;
    margin-top: -200px;
    margin-left: -200px;
    border-radius: 2px;
    box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0.13);
    overflow: hidden;
    background: #f39c12;
    color: #fff;
    font-family: 'Open Sans', Helvetica, sans-serif;
}

.center {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
}

.carousel {
    position: relative;
    width: 100%;
    text-align: center;
    font-size: 30px;
    line-height: 45px;
    height: 45px;

    .pre {
        position: absolute;
        top: 0;
        right: 56%;
        height: 45px;
        text-shadow: 2px 2px 2px #e67e22;
    }

    .change_outer {
        position: absolute;
        top: 0;
        left: 46%;
        text-align: left;
        height: 45px;
        overflow: hidden;

        .change_inner {
            position: relative;
            animation: rotate 8s ease-in-out infinite;
        }

        .element {
            display: block;
            font-weight: 700;
            text-shadow: 2px 2px 2px #e67e22;
        }
    }
}

@keyframes rotate {
    0%,
    20% {
        transform: translateY(0);
    }
    25%,
    45% {
        transform: translateY(-45px);
    }
    50%,
    70% {
        transform: translateY(-90px);
    }
    75%,
    95% {
        transform: translateY(-135px);
    }
    100% {
        transform: translateY(-180px);
    }
}
